<template>
	<view>
		<view class="make-info" v-if="payStatus == 1">
			<view class="top-title">收货进度</view>
			<view class="make-cont">
				<view class="user-info flex">
					<view class="pic"><image :src="data.seller_logo"></image></view>
					<text class="name">{{data.photo}}</text>
				</view>
				<view class="num">{{data.pay_amount}}</view>
				<text class="tips-text">交易成功</text>
				<view class="progress-line">
					<view class="info">
						<view class="item on">
							<view class="icon"><image src="../../static/icons/jewel/select.png"></image></view>
							<view class="name">付款成功</view>
							<view class="time">{{data.pay_time_text}}</view>
						</view>
						<view :class="data.status == 2||data.status == 1?'item on':'item'">
							<view class="icon">
								<image :src="data.status == 1||data.status == 2?'../../static/icons/jewel/select.png':'../../static/icons/jewel/select_mo.png'"></image>
							</view>
							<view class="name">处理中</view>
							<view class="time"></view>
						</view>
						<view :class="data.status == 2?'item on':'item'">
							<view class="icon">
								<image :src="data.status == 2?'../../static/icons/jewel/select.png':'../../static/icons/jewel/select_mo.png'"></image>
							</view>
							<view class="name">收货成功</view>
							<view class="time" v-if="data.status == 2">{{data.finishtime_text}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="prod-info">
			<view class="top-title">产品信息</view>
			<view class="cont">
				<view class="prod flex">
					<view class="pic"><image :src="data.photo" mode="aspectFit"></image></view>
					<view class="info">
						<view class="text name">{{data.goods_name}}</view><view class="text">￥{{data.order_total}}</view>
					</view>
				</view> 
				<view class="describe" v-if="data.content">
					<view class="s-title">宝贝描述</view>
					<view class="text">{{data.content}}</view>
				</view> 
				<view class="parameter" v-if="data.other_attr||data.attr">
					<view class="s-title">宝贝参数</view>
					<view class="list" v-if="data.attr">
						<view class="type" v-for="(item,index) in data.attr" :key="index" v-if="item.items != ''">{{item.name}}：{{item.items}}</view>
					</view>
					<view class="items" v-if="data.other_attr">
						<text v-for="(item,idx) in data.other_attr" :key="idx">{{item}}</text>
					</view>
				</view> 
			</view>
		</view>
		<!-- 在订单列表进来的未支付订单 -->
		<block v-if="payStatus == 0">
			<view class="price-info cont">
				<view class="item flex">
					<text class="name">商品总价</text><text class="num">￥{{data.order_total}}</text>
				</view>
				<view class="item flex">
					<text class="name">运费</text><text class="num">￥{{data.postage}}</text>
				</view>
			</view>
			<view class="footerHight"></view>
			<view class="pay-btn" @tap="payBtn">委托收款(￥{{data.pay_amount}})</view>
			<!-- 支付 -->
			<view class="u-popup-mask" v-if="payPop" @tap="closePopup" @touchmove.stop=""></view>
			<view class="pay_type_box" :class="[payPop?'z-show':'']">
				<view v-for="(item, index) in payList" :key="index">
					<view class="pay_type" :class="item.type" v-if="item.type != 'granary'" @tap="pay(item.type)">
						{{item.name}}
					</view>
				</view>
			</view>
		</block>
		
		<view class="g-frame-mask" v-if="showPopup" @tap="closePopup"></view>
		<view class="g-frame" v-if="showPopup">
			<view class="m-frame-header">
				<view class="u-frame-title">购买协议</view>
				<image class="u-frame-close" src="../../static/icons/ydt/close.png" @tap="closePopup"></image>
			</view>
			<scroll-view class="m-frame-content" scroll-y>
				<uParse :content="payArticle" @preview="preview" />
			</scroll-view>
			<view class="m-frame-footer">
				<view class="u-reset" v-if="!isOffAgreement" @tap="isOpenAgree">不再提醒</view>
				<view class="u-reset" v-else @tap="closePopup">取消</view>
				<view class="u-confirm" @tap="agree">同意</view>
			</view>
		</view>
		<view class="m-loading" v-if="showLoading">
			<image src="../../static/images/loading.gif" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import henglang from '@/common/common.js';
	import uParse from '@/components/uParse/src/wxParse.vue';
	export default {
		data() {
			return {
				showLoading: false,
				data:{},
				payStatus:'',
				payPop: false,
				payList:[],
				order_no:'',
				member:'',
				payArticle:'',
				showPopup: false,
				isOffAgreement:''
			}
		},
		components: {
			uParse
		},
		methods: {
			preview(src, e){
			},
			closePopup(){
				let that = this
				that.payPop = false
				that.showPopup = false
			},
			payBtn(){
				let that = this
				if(!that.isOffAgreement){
					that.showPopup = true
				}else{
					that.payPop = !that.payPop
				}
			},
			pay(paytype){
				let that = this;
				that.payPop = false;
				that.showLoading = true;
				henglang.post('Payment/pay', {type:paytype,order_no:that.order_no}, true, function (res){
					that.showLoading = false;
					switch (paytype) {
					    case 'wxpay':
						case 'alipay':
							let pay_data = res.data.data;
					        uni.requestPayment({
					            provider: paytype,
					            orderInfo: pay_data.paydata,
								// #ifdef MP-WEIXIN
								nonceStr: pay_data.nonceStr,
								timeStamp: pay_data.timeStamp,
								package: pay_data.package,
								signType: pay_data.signType,
								paySign: pay_data.paySign,
								// #endif
					            success: (res) => {
					                henglang.showToast('支付成功', 1500);
									setTimeout(()=>{
										henglang.get('transfer_order/getOrderInfo',{order_no: pay_data.order_no,member:1},true,function(res){
											that.payStatus = 1
											that.data = res.data.data
											uni.setStorage({
												key: 'pay_again',
												data: true,
											});
										});
									},1500)
					            },
					            fail: (res) => {
					                henglang.showToast('支付失败');
									
					            },
								complete:(res)=>{
								}
					        })
					        break;
					}
				})
			},
			isOpenAgree(){
				uni.setStorage({ 
					key: 'isOffAgreement',
					data: true,
				});
				this.isOffAgreement = uni.getStorageSync('isOffAgreement')
			},
			agree(){
				uni.setStorage({
					key: 'isOffAgreement',
					data: true,
				});
				this.isOffAgreement = uni.getStorageSync('isOffAgreement')
				this.showPopup = false
				this.payPop = true
			}
		},
		onLoad(options) {
			let that = this
			that.showLoading = true
			that.payStatus = options.pay_status
			that.order_no = options.order_no
			that.member = options.member
			henglang.get('transfer_order/getOrderInfo',{order_no: options.order_no,member:options.member},true,function(res){
				that.showLoading = false
				that.data = res.data.data
			});
			henglang.get('Payment/payList', {}, true, function (res){
				that.payList = res.data.data;
			})
			
			henglang.get('transfer_order/payArticle', {}, true, function (res){
				that.payArticle = res.data.data.content
			})
			that.isOffAgreement = uni.getStorageSync('isOffAgreement')
		}
	};
</script>

<style>
	page{
		background: #f3f3f3;
	}
	.top-title{
		background: #f3f3f3;
		color: #a2a2a2;
		font-size: 32rpx;
		line-height: 75rpx;
		padding: 0 36rpx;
	}
	.s-title{
		color: #333333;
		font-size: 32rpx;
		padding-top: 23rpx;
		border-top: 1px solid #e8e8e8;
		padding-bottom: 15rpx;
	}
	.cont{
		padding: 0 36rpx;
		background: #FFFFFF;
	}
	.flex{
		display: flex;
		align-items: center;
	}
	.make-info .make-cont{
		background: #FFFFFF;
	}
	.make-info .user-info{
		justify-content: center;
		padding-top: 42rpx;
	}
	.make-info .user-info .pic image{
		width: 76rpx;
		height: 76rpx;
		display: block;
		border-radius: 50%;
		box-shadow:0px 3px 4px rgba(180,180,180,.59);
	}
	.make-info .user-info .name{
		color: #4c4c4c;
		font-size: 34rpx;
		margin-left: 14rpx;
	}
	.make-info .num{
		color: #000000;
		font-size: 50rpx;
		text-align: center;
		padding-top: 22rpx;
		padding-bottom: 8rpx;
	}
	.make-info .tips-text{
		color: #989898;
		font-size: 28rpx;
		text-align: center;
		display: block;
	}
	.progress-line .info{
		display: flex;
		justify-content: space-between;
		justify-content: center;
		position: relative;
		z-index: 1;
		margin-top: 50rpx;
		padding-bottom: 30rpx;
	}
	.progress-line .info:after{
		content: '';
		position: absolute;
		top: 17rpx;
		left: 50%;
		margin-left: -254rpx;
		width: 508rpx;
		height: 5rpx;
		background: #b2b2b2;
		z-index: -1;
	}
	.progress-line .info .item{
		text-align: center;
		flex: 1;
		position: relative;
		z-index: 10;
	}
	.progress-line .info .on .name{
		color: #e93a3a;
	}
	.progress-line .info .on .icon:after{
		content: '';
		position: absolute;
		right: 0rpx;
		top: 17rpx;
		width: 254rpx;
		height: 5rpx;
		background: #e93a3a;
		z-index: -10;
	}
	.progress-line .info .on:nth-child(1) .icon:after{
		height: 0rpx;
	}
	.progress-line .info .icon{
		position: relative;
		z-index: 2;
		width: 38rpx;
		height: 38rpx;
		margin: 0 auto;
		margin-bottom: 9rpx;
	}
	.progress-line .info .icon image{
		width: 38rpx;
		height: 38rpx;
		position: absolute;
		z-index: 999;
		top: 0;
		left: 0;
	}
	.progress-line .item .name{
		color: #b2b2b2;
		font-size: 28rpx;
		padding-bottom: 4rpx;
	}
	.progress-line .item .time{
		color: #999999;
		font-size: 26rpx;
		width: 200rpx;
		margin: 0 auto;
	}
	.prod-info .prod{
		padding: 28rpx 0;
	}
	.prod-info .prod .pic{
		width: 144rpx;
		height: 144rpx;
		overflow: hidden;
		border: 1px solid #858585;
		border-radius: 10rpx;
		margin-right: 22rpx;
	}
	.prod-info .prod .pic image{
		width: 100%;
		height: 100%;
		display: block;
	}
	.prod-info .prod .info .text{
		color: #4c4c4c;
		font-size: 34rpx;
	}
	.prod-info .prod .info .name{
		line-height: 44rpx;
		max-height: 88rpx;
		overflow: hidden;
		margin-bottom: 10rpx;
		width: 480rpx;
	}
	.prod-info .describe{
		padding-bottom: 23rpx;
	}
	.prod-info .describe .text{
		color: #666666;
		font-size: 28rpx;
	}
	.prod-info .parameter .list{
		display: flex;
		flex-wrap:wrap;
	}
	.prod-info .parameter .list .type{
		color: #666666;
		font-size: 28rpx;
		margin-right: 80rpx;
		margin-bottom: 10rpx;
	}
	.prod-info .parameter .items{
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 35rpx;
		padding-top: 10rpx;
	}
	.prod-info .parameter .items text{
		color: #666666;
		font-size: 28rpx;
		border: 1px solid #4c4b4b;
		line-height: 38rpx;
		border-radius: 8rpx;
		padding: 0 12rpx;
		margin-right: 15rpx;
	}
	.price-info{
		margin-top: 10rpx;
	}
	.price-info .item{
		justify-content: space-between;
		line-height: 80rpx;
		border-bottom: 1px solid #e8e8e8;
	}
	.price-info .item text{
		color: #4d4d4d;
		font-size: 32rpx;
	}
	.footerHight{
		width: 100%;
		height: 140rpx;
	}
	.pay-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		line-height: 108rpx;
		background: #f47a7a;
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
	}
	.z-show {
	    transform: translateY(0) !important;
	}
	.u-popup-mask {
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100vw;
	    height: 100vh;
	    background: rgba(0, 0, 0, .5);
	    z-index: 10;
	}
	.pay_type_box{
		background: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		z-index: 10;
		transform: translateY(100%);
		transition: .3s;
	}
	.pay_type{
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 30rpx;
		width: 90%;
		margin: 20upx auto;
	}
	.wxpay{
		background: #06ba04;
	}
	.alipay{
		background: #1b95d4;
	}
	.g-frame {
	    width: 100%;
	    background: #fff;
	    border-radius: 20rpx 20rpx 0 0;
	    position: fixed;
	    bottom: 0;
	    overflow: hidden;
		z-index: 12;
		left: 0;
	}
	
	.g-frame-mask {
	    background: #000;
	    opacity: .5;
	    height: 100vh;
	    width: 100%;
	    position: fixed;
	    top: 0upx;
		z-index: 11;
	}
	
	.m-frame-header {
	    height: 110upx;
	    width: 100%;
	    background: #d71311;
	    border-top-right-radius: 20upx;
	    border-top-left-radius: 20upx;
		position: relative;
	}
	
	.u-frame-title {
	    width: 100%;
	    height: 100%;
	    text-align: center;
	    color: #fff;
	    line-height: 110upx;
	    font-size: 32upx;
	    float: left;
	}
	
	.u-frame-close {
	    position: absolute !important;
	    width: 42upx;
	    height: 42upx;
	    background-size: 100%;
	    top: 34upx;
	    right: 32upx;
	}
	
	.m-frame-content {
	    width: 90%;
		margin: 0 auto;
		height: 700rpx;
		padding: 40rpx 0;
	}
	.m-frame-content .express-content .input input{
		font-size: 32rpx;
		padding: 10rpx;
		border: 1px solid #CCCCCC;
		margin-bottom: 20rpx;
	}
	
	.m-frame-footer {
	    height: 97upx;
	    width: 100%;
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
	}
	
	.m-frame-footer view {
		flex: 1;
	    line-height: 97upx;
	    text-align: center;
	    font-size: 32upx;
	}
	.m-frame-footer .on{
		background: #CCCCCC;
	}
	.u-reset {
	    color: #ff0000;
	    background: #fff;
	}
	
	.u-confirm {
	    background: #d71311;
	    color: #fff;
	}
	
</style>
